<template>
    <ToDoHeader @addTodo="addTodo" />
    <ToDoMain :list="showList" @delTodo="delTodo" />
    <ToDoFooter :lastLenght="lastLenght" :status="status" @updateStatus="updateStatus" />
</template>

<script setup>
   import ToDoHeader from './components/ToDoHeader.vue';
   import ToDoMain from './components/ToDoMain.vue';
   import ToDoFooter from './components/ToDoFooter.vue';

   import { ref, computed } from 'vue'
   const list = ref([
    {id: 1, name: '晨练', done: false},
    {id: 2, name: '书法', done: true}
   ])

   const addTodo = name => {
    list.value.push({name, done: false, id: ~~(Math.random() * 1000)})
   }
   
   const delTodo = id => {
    list.value = list.value.filter(item => item.id !== id)
   }

   const lastLenght = computed(() => {
    return list.value.filter(item => !item.done).length
   })

   const status = ref('all')

   const showList = computed(() => {
    if(status.value === 'all') {
        return list.value
    }

    if(status.value === 'active') {
        return list.value.filter(item => !item.done)
    }

    if(status.value === 'completed') {
        return list.value.filter(item => item.done)
    }
   })

   const updateStatus = value => {
    status.value = value
   }
</script>